import React, {useEffect, useState} from 'react'
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import {Transfer, Button, Modal, Row, ConfigProvider } from 'antd'
import {connect} from 'umi'
import { getMenuEntityList, getRoleMenu } from '../service'

const CreateMenuTransfer = (props) => {

  const {onSubmit, onCancel, current, visible, type} = props;
  const [roleId, setRoleId] = useState('');
  const [mockData, setMockData] = useState([]);
  const [targetKeys, setTargetKeys] = useState([]);
  const [title, setTitle] = useState('');

  useEffect(() => {
    if (type)
      setTitle('功能');
    else
      setTitle('菜单');
    if (current){
      const targetKeysInit = [];
      const mockDataInit = [];
      setRoleId(current.roleId);
      getMenuEntityList(type).then(menuEntityList => {
        getRoleMenu(current.roleId,type).then(roleMenus => {
          for (let i = 0; i < menuEntityList.length; i++) {
            const data = {
              key: menuEntityList[i].menuId,
              title: menuEntityList[i].name,
              description: menuEntityList[i].name,
              chosen: false,
            };
            let hasRoleFlag = roleMenus.findIndex(item =>{ return  item.menuId === menuEntityList[i].menuId });
            if (hasRoleFlag !== -1){
              data.chosen = true;
              targetKeysInit.push(data.key);
            }
            mockDataInit.push(data);
          }
          setMockData(mockDataInit);
          setTargetKeys(targetKeysInit);
        });
      });
    }
  }, [current]);

  const filterOption = (inputValue, option) => option.description.indexOf(inputValue.toLowerCase()) > -1;

  const handleChange = (targetKeys) => {
    setTargetKeys(targetKeys);
  };

  const handleSearch = (dir, value) => {
  };

  const onFormCancel = () => {
    onCancel();
  };

  const handleSubmit = async () => {
    let data = {
      roleId: parseInt(roleId),
      menuIds: targetKeys
    };
    onSubmit(data,type);
  };

  const renderFooter = () => {
    return (
      <>
        <Button type="primary" onClick={() => handleSubmit()}>保存</Button>
        <Button onClick={() => onFormCancel()}>关闭页面</Button>
      </>
    )
  };

  return (
    <Modal
      maskClosable={false}
      width={1000}
      destroyOnClose
      title='分配角色'
      visible={visible}
      footer={renderFooter()}
      onOk={handleSubmit}
      onCancel={() => onFormCancel()}
      okText="确认"
      cancelText="取消"
    >
      <Row justify='center'>
        <ConfigProvider locale={zh_CN}>
          <Transfer
            dataSource={mockData}
            showSearch
            titles={[`角色未分配${title}`,`角色已分配${title}`]}
            filterOption={filterOption}
            targetKeys={targetKeys}
            listStyle={{
              width: 300,
              height: 600,
            }}
            onChange={handleChange}
            onSearch={handleSearch}
            render={item => item.title}
          />
        </ConfigProvider>
      </Row>


    </Modal>
  )
};


export default connect(() => ({

}))(CreateMenuTransfer)
